<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";
import { useNavigationBarStore } from "@/stores/navigationBar";
import { storeToRefs } from "pinia";

const navigationBarStore = useNavigationBarStore();
//这里获取isClick时必须用storeToRefs包裹一层否则会丢失响应式
const { isClick } = storeToRefs(navigationBarStore);

const setIsClick = navigationBarStore.setIsClick;

const router = useRouter();
const route = useRoute();
const emits = defineEmits(["clickBar"]);
const list = [
  "首页",
  "主页面",
  "科学成就",
  "科学家",
  "科学著作",
  "优秀文化",
  "尾页",
];
const url = [
  "/",
  "/mainPage",
  "/detailPages/scientificAchievements",
  "/detailPages/scientist",
  "/detailPages/scientificWorks",
  "/detailPages/excellentCulture",
  "/lastPage",
];

const onClick = (index) => {
  console.log(url[index]);

  router.push(url[index]);
  // console.log(url[index]);

  if (index != 0 && index != 1 && index != 6) {
    // let id = url[index][url[index].length - 1];
    // emits("clickBar", id);换成下面了
    emits("clickBar", index - 2);
  }
  setIsClick(index);
  console.log(index);
};
//控制返回图标
let isShow = true;
isShow = route.path == "/" ? false : true;
</script>
<template>
  <!-- 导航栏组件 -->
  <div class="navigationBar">
    <!-- 返回按钮 -->
    <el-icon-ArrowLeft
      @click="router.go(-1)"
      v-if="isShow"
      class="iconLeft"
    ></el-icon-ArrowLeft>
    <div class="left">
      <!-- <el-image class="img" :src="loge" fit="cover" /> -->
      <div class="text">
        华夏熵鉴录&nbsp;&nbsp;&nbsp;&nbsp;&mdash;&mdash;
        中华自然科学及其它优秀文化瑰宝可视化
      </div>
    </div>
    <!-- <div class="search">
      <div class="search1">
        <el-icon class="icon">
          <el-icon-Search></el-icon-Search>
        </el-icon>
        <input placeholder="请输入内容" type="text" />
      </div>
    </div> -->
    <div class="right">
      <ul>
        <li
          @click="onClick(index)"
          v-for="(item, index) in list"
          :key="item"
          :class="{ active: isClick === index }"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.navigationBar {
  font-family: NavigationBar;

  &::before {
    content: ""; /* 必须设置 content */
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0) 80px
    );
    pointer-events: none; /* 允许穿透点击下方内容 */
  }
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  color: #fff;
  padding: 0 150px;
  height: 60px;
  // background: rgba(0,0,0,0.2);
  width: 100%;
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2);
  z-index: 1111;
  .iconLeft {
    position: absolute;
    left: 60px;
    top: 15px;
    width: 30px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    padding: 5px;
  }
  .left {
    display: flex;
    align-items: center;
    .img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 20px;
    }
    .text {
      font-size: 28px;
    }
  }
  .search {
    flex: 1;
    margin: 0 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .search1 {
      width: 100%;
      height: 40px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 20px;
      line-height: 40px;
      display: flex;
      align-items: center;
      .icon {
        margin-left: 10px;
        margin-right: 10px;
        color: #fff; /* 红色提示文字 */
        opacity: 0.5; /* 修复 Firefox 默认低透明度问题 */
      }
      input {
        width: 100%;
        height: 100%;
        padding-right: 10px;
      }
      input::placeholder {
        /* 现代浏览器 */
        color: #fff; /* 红色提示文字 */
        opacity: 0.5; /* 修复 Firefox 默认低透明度问题 */
      }
    }
  }
  .right {
    ul {
      display: flex;
      justify-content: space-between;
      width: 600px;
      li {
        display: block;
        transition: all 0.1s linear;
        font-size: 21px;
      }
      li:hover {
        cursor: pointer;
        transform: scale(1.1);
      }
      li:active {
        cursor: pointer;
        //点击未松开鼠标时候的样式
        color: #eee;
        transform: scale(0.95) skewX(-5deg);
      }
      li.active {
        // 导航栏高亮字体颜色
        color: #000;
        transform: scale(1.1);
      }
    }
    ul:hover {
      cursor: pointer;
    }
  }
}
</style>
